<template>
  <div class="weight-input">
    <div class="el-input el-input--small">
      <input
        ref="input"
        class="el-input__inner"
        type="number"
        min="0"
        v-model="weight"
        @blur="updateWeight($event)">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      weight: this.value,
    };
  },
  watch: {
    value(value) {
      this.weight = value;
    }
  },
  props: {
    data: Object,
    value: [Number, String],
  },
  methods: {
    updateWeight() {
      if (this.value == this.weight) { // 没有变动
        return false;
      }
      if (parseInt(this.weight) > 100 || parseInt(this.weight) < 0) {
        this.$message.error('请输入大于等于0且小于等于100的数值');
        this.weight = this.value;
        return false;
      }
    },
  }
}
</script>
<style scoped>
  .weight-input {
    width: 90px;
  }
</style>
